<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/admin' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>老人与员工关联列表</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card style="float: left ;width: 100%; height: 100%;margin: 10px">
      <el-divider content-position="left">关联表格</el-divider>

      <!--    添加事件的按钮-->
      <el-button type="warning" icon="el-icon-edit" @click="openAddNewDialog()">添加关联</el-button>


      <!--    关联列表-->
      <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          border
          :data="this.linkArr">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="编号" align="center" width="50"></el-table-column>
        <el-table-column prop="olderName" label="老人姓名" header-align="center"></el-table-column>
        <el-table-column prop="staffName" label="员工姓名" header-align="center"></el-table-column>
        <el-table-column prop="staffRole" label="员工职位" header-align="center"></el-table-column>
        <el-table-column prop="gmtCreate" :formatter="formaTime" label="关联时间" header-align="center"></el-table-column>



        <!--操作列-->
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.staffId!=null" size="mini" type="warning"
                       @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.staffId!=null" size="mini" type="info" icon="el-icon-delete"
                       @click="openDeleteConfirm(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>


    </el-card>



    <!-- 弹出的新增关联的对话框 -->
    <el-dialog title= "新增关联"  :visible.sync="addNewFormVisible">
      <el-form :model="addNewForm" :rules="rules" ref="addNewForm">


        <el-form-item label="关联老人" :label-width="formLabelWidth"  prop="olderId">
          <el-select v-model="addNewForm.olderId"  >
            <el-option
                v-for="item in olderListOptions" :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关联员工" :label-width="formLabelWidth"  prop="staffId">
          <el-select v-model="addNewForm.staffId"  >
            <el-option
                v-for="item in staffListOptions" :key="item.id"
                :label="item.username"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


      </el-form>


      <!-- 新增事件的按钮       -->
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="warning" @click="addNewSubmitForm('addNewForm')">提交关联</el-button>
        <el-button @click="addNewFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>



<!--    弹出的修改关联的列表-->
    <el-dialog title= "修改关联"  :visible.sync="dialogVisible">
      <el-descriptions class="margin-top" title="" :column="1"  border>
        <el-descriptions-item label="老人姓名":label-width="formLabelWidth">{{ editForm.olderName }}</el-descriptions-item>
        <el-descriptions-item label="修改为:":label-width="formLabelWidth">
          <el-form style="margin: 10px" :model="editForm" :rules="rules" ref="editForm">
            <el-form-item    prop="staffId">
              <el-select v-model="editForm.staffId"  >
                <el-option
                    v-for="item in staffListOptions" :key="item.id"
                    :label="item.username"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-descriptions-item>
      </el-descriptions>

      <div slot="footer" class="dialog-footer" style="margin: 0">
        <el-button center= true @click="dialogVisible = false">取消</el-button>
        <el-button center= true type="primary" @click="updateSubmitForm('editForm')">提交</el-button>
      </div>


    </el-dialog>



  </div>
</template>

<script>
export default {
  data() {
    return {
      linkArr:[],
      addNewFormVisible:false,
      addNewForm:{},
      formLabelWidth: '120px',
      olderListOptions:[],
      staffListOptions:[],
      dialogVisible:false,
      editForm:{},
      rules: {
        olderId: [{ required: true, message: '请选择要关联的老人', trigger: 'blur' }],
        staffId: [{ required: true, message: '请选择要关联的员工', trigger: 'blur' }],

      },

    }
  },
  methods:{
    updateSubmitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = this.qs.stringify(this.editForm);
          let url = 'http://localhost:8080/older-staff-links/update';
          console.log('url = ' + url);
          console.log('formData = ' + formData);
          this.axios
              .create(
                  {
                    headers:{
                      "Authorization":localStorage.getItem("jwt")
                    }
                  }
              )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$message({
                message: '事故提交成功！',
                type: 'success'
              });
              this.resetForm(formName);
              this.loadLinkList();
              this.dialogVisible=false;
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

    openEditDialog(link){
      this.dialogVisible = true;
      let url = 'http://localhost:8080/older-staff-links/'+link.id;
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.editForm = responseBody.data;
          console.log("修改的对象:{}",this.editForm);

        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodList();
            }
          });
        }
      });


    },

    openDeleteConfirm(link){
      console.log(link);
      let message = '此操作将永久删除[' + link.olderName+ ']与['+link.staffName +']的关联，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(link);
      }).catch(() => {
      });
    },
    handleDelete(link){
      console.log(link);
      let url = 'http://localhost:8080/older-staff-links/' + link.id + "/delete";
      console.log('url = ' + url);

      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.loadLinkList();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadLinkList();
            }
          });

        } else {
          this.$message.error(responseBody.message);
        }
      });

    },


    addNewSubmitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/older-staff-links/add-new';
          console.log('url = ' + url);
          let formData = this.qs.stringify(this.addNewForm);
          console.log('formData = ' + formData);
          this.axios
              .create(
                  {
                    headers:{
                      "Authorization":localStorage.getItem("jwt")
                    }
                  }
              )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$message({
                message: '关联成功！',
                type: 'success'
              });
              this.resetForm(formName);
              this.loadLinkList();
              this.addNewFormVisible=false;
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    loadStaffList(){
      let url = 'http://localhost:8080/staff';
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.staffListOptions = responseBody.data;
        }
      });

    },

    formaTime(row,column) {

      let data = row[column.property]
      let dtime = new Date(data)
      const year = dtime.getFullYear()
      let month = dtime.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }

      let day = dtime.getDate()
      if (day < 10) {
        day = '0' + day
      }
      let hour = dtime.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      let minute = dtime.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      let second = dtime.getSeconds()
      if (second < 10) {
        second = '0' + second
      }
      return year + '-' + month + '-' + day + ' ' + hour + ': ' + minute + ':' + second
    },
    loadOlderList(){
      let url = 'http://localhost:8080/olders';
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.olderListOptions = responseBody.data;
        }
      });

    },

    openAddNewDialog(){
      this.addNewFormVisible=true;
    },

    loadLinkList() {
      let url = 'http://localhost:8080/older-staff-links/list';
      console.log('url = ' + url);

      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.linkArr = responseBody.data;

        }
        console.log(this.linkArr)
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  },
  mounted() {
    this.loadLinkList();
    this.loadOlderList();
    this.loadStaffList();
  }


}
</script>

<style scoped>

</style>